<template>
    <div style="width: 100%;height: 100%;position: relative">
        <div id="cesiumContainer"></div>
        <div style="position: absolute;top:50px;right: 50px;">
            <el-button @click="startTour">开始</el-button>
            <el-button  @click="stopTour">停止</el-button>
        </div>
    </div>

</template>

<script>
    import * as Cesium from 'cesium/Cesium'
    import "cesium/Widgets/widgets.css";

    export default {
        name: 'KmlTour',
        mounted() {
            this.initCesium();
            this.addKmlDataSource()
        },
        methods: {
            initCesium() {
                this.viewer = new Cesium.Viewer('cesiumContainer', {
                    animation: false,
                    baseLayerPicker: false,
                    fullscreenButton: false,
                    geocoder: false,
                    homeButton: false,
                    infoBox: false,
                    sceneModePicker: false,
                    navigationHelpButton: false,
                    scene3DOnly: true,
                    timeline: false,
                    selectionIndicator: false,//是否显示选取指示器组件
                    shouldAnimate: false,     //自动播放动画控件
                    shadows: true,//是否显示光照投射的阴影
                    terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY,//地质接收阴影
                    sceneMode: Cesium.SceneMode.SCENE3D,
                    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
                        url:"https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer?f=jsapi"
                    }),
                });
                this.viewer._cesiumWidget._creditContainer.style.display = "none";  //	去除版权信息
            },
            addKmlDataSource() {
                Cesium.KmlDataSource.load("http://localhost:8888/model/SampleData/kml/eiffel-tower-flyto.kml",
                    {
                        camera: this.viewer.scene.camera,
                        canvas: this.viewer.scene.canvas,
                    }
                ).then((dataSource) => {
                    this.viewer.dataSources.add(dataSource)
                    console.log(dataSource)
                    this.tour = dataSource.kmlTours[0];
                    this.tour.tourStart.addEventListener(function () {
                        console.log("Start tour");
                    });
                    this.tour.tourEnd.addEventListener(function (terminated) {
                        console.log(`${terminated ? "Terminate" : "End"} tour`);
                    });
                    this.tour.entryStart.addEventListener(function (entry) {
                        console.log(`Play ${entry.type} (${entry.duration})`);
                    });
                    this.tour.entryEnd.addEventListener(function (entry, terminated) {
                        console.log(`${terminated ? "Terminate" : "End"} ${entry.type}`);
                    });
                })
            },
            startTour(){
                this.tour.play(this.viewer);
            },
            stopTour(){
                this.tour.stop();
            },

        }
    }
</script>

